<template>
    <div class="content-wrapper-view">
        <div class="content-wrapper-body">
            <div class="content">
                <el-tabs v-model="activeName" tab-position="left">
                    <el-tab-pane name="BaseInfo">
                        <span slot="label">
                            <i class="el-icon-date"></i> 基本信息</span>
                        <my-info></my-info>
                    </el-tab-pane>

                    <el-tab-pane name="MyRole">
                        <span slot="label">
                            <i class="el-icon-date"></i> 我的角色</span>
                        <my-role></my-role>
                    </el-tab-pane>

                    <el-tab-pane name="MyPermission">
                        <span slot="label">
                            <i class="el-icon-date"></i> 我的权限</span>
                        <my-permission></my-permission>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>

</template>


<script>
import MyInfo from "./MyInfo.vue";
import MyRole from "./MyRole.vue";
import MyPermission from "./MyPermission.vue";

export default {
    name: "index",
    components: {
        MyInfo,
        MyRole,
        MyPermission
    },
    data() {
        return {
            activeName: "BaseInfo"
        };
    }
};
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
.content {
    min-height: 600px;
}
</style>
